<template>
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="pd" ref="pd">
        <el-form-item prop="jdmc">
          <el-input v-model="pd.jdmc"  placeholder="景点名称" style="width:300px;"/>
        </el-form-item>
        <el-form-item prop="jddz">
          <el-input v-model="pd.jddz" placeholder="景点地址" style="width:300px;"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="fetchData">查询</el-button>  <!--icon="el-icon-search"-->
        </el-form-item>
        <el-form-item>
          <el-button  @click="resetForm('pd')">重置</el-button>
        </el-form-item>

<br>
        <el-form-item><!--@click="handleAdd" icon="el-icon-edit"-->
          <router-link :to="{name:'editScenicspot' }"> <el-button type="primary"  icon="el-icon-plus"  >发布景点 </el-button></router-link>
        </el-form-item>
      </el-form>

    </el-col>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="景点编号" width="100">
        <template slot-scope="scope">
          <!--{{ scope.$index }}-->
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="260" align="center">
        <template slot-scope="scope" >
          <span  v-if="scope.row.jdtp!=''">
             <img :src="scope.row.jdtp.split(',')[0]"  min-width="70" height="70" />
          </span>
          <span v-else>
            <!--<img src="../../icons/zwtp.png"  min-width="70" height="70" />-->
          </span>

          </template>
      </el-table-column>
      <el-table-column label="景点名称" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.jdmc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地点" width="100" align="center"  :show-overflow-tooltip=true>
        <template slot-scope="scope">
          <span>{{ scope.row.jddz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地点描述" width="200" align="center" :show-overflow-tooltip=true>
        <template slot-scope="scope">
          <span>{{ scope.row.ddms }}</span>
        </template>
      </el-table-column>
      <el-table-column label="景点标签" width="200" align="center">
        <template slot-scope="scope">
          <span v-for ="item in scope.row.jdbq_mc.split(',')" :key="item"   v-if="scope.row.jdbq_mc!=''">&nbsp;
            <el-tag  size="mini" type="" > {{    item    }} </el-tag>
           <!--<el-tag  type="warning">{{ scope.row.jdbq_mc.split(',')[0]  }}</el-tag>-->
           <!--<el-tag  type="success">{{ scope.row.jdbq_mc.split(',')[1]  }}</el-tag>-->
          </span>
        </template>
      </el-table-column>


      <el-table-column align="center" prop="created_at" label="开发时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.kfsj }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序号" width="70">
        <template slot-scope="scope">
          <span>{{ scope.row.pxh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope)">编辑
      <!--      <router-link  type="button"  :to="{name:'editScenicspot', query: {id:scope.row.id} }">编辑</router-link> -->
          </el-button>
        <!--  <router-link :to="{name:'editScenicspot'}">去B页面</router-link> <br/>
          <router-link :to="{name:'editScenicspot', params: {id:scope.row.id}}">去B页面，params传入参数</router-link> <br/>
           -->

          <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--<el-button :disabled="users.length===0" type="danger" @click="batchRemove">批量删除</el-button>-->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="showCount"
        :page-count="totalPage"
        :total="totalResult"
        style="float:right;"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

    </el-col>
<!--
    &lt;!&ndash;新增界面&ndash;&gt;
    &lt;!&ndash; Form &ndash;&gt;
    &lt;!&ndash;<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>&ndash;&gt;

    <el-dialog title="新增景点" :visible.sync="dialogFormVisible">
      <el-form :model="form">

        <el-form-item label="景点名称：" :label-width="formLabelWidth">
          <el-input v-model="form.jdmc" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item  label="标题图片：" :label-width="formLabelWidth">
          <el-upload   v-model="form.jdtp"
                       class="upload-demo"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
                       :before-remove="beforeRemove"
                       multiple
                       :limit="3"
                       :on-exceed="handleExceed"
                       action="https://192.168.0.116:9600/uploadFile"
                       :file-list="fileList"
                       list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif/bmp文件，且不超过2M</div>
          </el-upload>

        </el-form-item>

       <el-form-item label="开发时间：" :label-width="formLabelWidth">
         <el-input v-model="form.kfsj" auto-complete="off"></el-input>
     </el-form-item>
        <el-form-item label="景点地址：" :label-width="formLabelWidth">
          <el-input v-model="form.jddz" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地点描述：" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.ddms">
          </el-input>
        </el-form-item>
        <el-form-item label="景点标签：" :label-width="formLabelWidth">
          <el-select v-model="jdbqs" multiple placeholder="请选择"  stype="width:300px;" >
            <el-option
              v-for="item in dicts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="排序号：" :label-width="formLabelWidth">
            <el-input v-model="form.pxh" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示设置：" :label-width="formLabelWidth"> &lt;!&ndash; active-text="显示"     inactive-text="隐藏"&ndash;&gt;
            <el-switch
              v-model="form.visiable"
             >
            </el-switch>
          </el-form-item>
        <el-form-item label="推荐语：" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.tjy">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>-->

  </div>

</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
import util from '@/common/js/util'
import { findAllScenicspotlistPage, addScenicspot ,delScenicspot} from '@/api/senicspot'
export default {

  data() {
    return {
      imageUrl: '',
      currentPage: 1,
      currentResult: 0,
      entityOrField: true,
      pageStr: 'string',
      pd: {
        jdmc: '',
        jddz: ''
      },
      showCount: 5,
      totalPage: 0,
      totalResult: 0,
      list: [],
      fileList: [],
      listLoading: true,

      addLoading: false,
      addFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      value3: true,
      value4: true,
      dicts: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],


      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        jdtp: '',
        jdmc: '',
        jddz: '',
        ddms: '',
        kfsj: '',
        jdbqs: [],
        tjy: '',
        jdms:'',
        pxh:'',
        visiable:'1'


      },
      formLabelWidth: '120px'

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 是否启用转换
    formatScbj: function(row, column) {
      return row.scbj === 1 ? '未启用' : row.scbj === 0 ? '已启用' : '未知'
    },
    formatScbjValue: function(value) {
      return value === 1 ? '未启用' : value === 0 ? '已启用' : '未知'
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`)
      this.currentPage = currentPage
      this.fetchData()
    },
    handleSizeChange(showCount) {
      console.log(`每页 ${showCount} 条`)
      this.showCount = showCount
      this.fetchData()
    },
    // 列表
    fetchData() {
      const page = {
        currentPage: this.currentPage,
        currentResult: 0,
        entityOrField: true,
        pageStr: 'string',
        pd: {
          jdmc: this.pd.jdmc,
          jddz: this.pd.jddz
        },
        showCount: this.showCount,
        totalPage: 0,
        totalResult: 0
      }

      this.listLoading = true
      findAllScenicspotlistPage(page).then(response => {
        if (response.data.reason === null) {
          this.currentPage = response.data.result.page.currentPage
          this.totalPage = response.data.result.page.totalPage
          this.totalResult = response.data.result.page.totalResult
          this.list = response.data.result.list
          // this.page = response.data.result.page
          this.listLoading = false
        } else {
          this.loading = false
          this.$message({
            message: response.data.reason.text,
            type: 'error'
          })
        }
      })
    },

    handleEdit:function(item){
      let id = item.row.id;
      let self =this;
      console.log('---id',id),

        /*3种传参方式*/
      // this.$router.push({
      //   path: `/editScenicspot/${row.id}`,
      // })
      // this.$router.push({
      //   name: 'editScenicspot',
      //   params: {
      //     id: row.id
      //   }
      // })
      self.$router.push({
        path: 'editScenicspot',
        query: {
          id: id
        }
      })

    },
    // 显示新增界面
    handleAdd: function() {
      console.log(this.addFormVisible)
      this.dialogFormVisible = true
      this.addForm = {
        jjmc: '',
        jddz: '',
        jdbq: ''
      }
    },
    // 新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            // NProgress.start();
            const para = Object.assign({}, this.addForm)
            // para.birth = (!para.birth || para.birth === '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd')
            if(this.form.id!==''){//更新
              updateScenicspot(para).then((res) => {
                this.addLoading = false
                // NProgress.done();
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$refs['addForm'].resetFields()
                this.addFormVisible = false
                this.fetchData()
              })
            }else {
              addScenicspot(para).then((res) => {
                this.addLoading = false
                // NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$refs['addForm'].resetFields()
                this.addFormVisible = false
                this.fetchData()
              })
            }
          })
        }
      })
    },


    //删除
    handleDel: function (index, row) {
      console.log('删除',index);
      console.log('删除row',row);
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = { id: row.id };
        delScenicspot(para).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.fetchData();
        });
      }).catch(() => {
        this.listLoading = false;
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning(`最多可上传 3 个文件！`);
    },
    beforeRemove(file, fileList) {
      return true;
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    }


  }
}
</script>
